<script setup>
import { ref } from "vue";

const props = defineProps({
  title: String,
  fontSize: Number
});

const option = ref({
  graphic: {
    elements: [
      // 定义一个图形元素数组，用于在图表中添加自定义图形或文本
      {
        type: "text", // 指定元素类型为文本
        left: "center", // 水平定位：居中
        top: "center", // 垂直定位：居中
        style: {
          // 文本样式配置
          text: props.title, // 显示的文本内容
          fontSize: props.fontSize || 150, // 字体大小80像素
          fontWeight: 100, // 字体加粗
          lineDash: [0, 200], // 虚线模式：[实线长度, 虚线间隔]，初始不可见实线
          lineDashOffset: 0, // 虚线偏移量初始值
          fill: "transparent", // 填充颜色透明（初始无填充）
          stroke: "#000", // 描边颜色黑色
          lineWidth: 0.5, // 描边线宽1像素
          fontFamily: "homeTitle",
        },
        keyframeAnimation: {
          // 关键帧动画配置
          duration: 3000, // 动画总时长3000毫秒（3秒）
          // loop: true, // 开启循环播放
          keyframes: [
            // 定义关键帧序列
            {
              percent: 0.7, // 动画进行到70%时的状态（约2.1秒）
              style: {
                fill: "transparent", // 保持填充透明
                lineDashOffset: 200, // 虚线偏移量增加到200（完成描边绘制）
                lineDash: [200, 0], // 切换为完全实线模式（实线长200，无间隔）
              },
            },
            {
              percent: 0.8, // 动画进行到80%时的状态（约2.4秒）
              style: {
                fill: "transparent", // 保持填充透明，制造短暂停顿效果
              },
            },
            {
              percent: 1, // 动画进行到100%时的状态（3秒）
              style: {
                fill: "#000", // 填充颜色变为黑色，完成颜色填充效果
              },
            },
          ],
        },
      },
    ],
  },
});
</script>

<template>
  <!-- 大标题 -->

  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
